<script setup lang="ts">
import F_list, {type filterGroupType} from "@/components/admin/f_list.vue";
import {aiRoleListApi, type aiRoleType, type aiRoleUpdateAdminType} from "@/api/ai_role_api";
import type {columnType} from "@/components/admin/f_list.vue";

import {reactive, ref} from "vue";
import F_ai_role_create from "@/components/common/f_ai_role_create.vue";
import {aiRoleRemoveApi} from "@/api/ai_role_api";
import {Message} from "@arco-design/web-vue";
import F_avatar from "@/components/common/f_avatar.vue";
const columns: columnType[] = [
  {title: "ID", dataIndex: 'id'},
  {title: "角色名称", dataIndex: 'title'},
  {title: "角色头像", slotName: 'avatar'},
  {title: "创建人", dataIndex: 'roleUserNickname'},
  {title: "标签", dataIndex: 'category'},
  {title: "介绍", slotName: 'abstract'},
  {title: "会话数", dataIndex: 'sessionCount'},
  {title: "对话数", dataIndex: 'chatCount'},
  {title: "提示词", slotName: 'prompt'},
  {title: "创建时间", dataIndex: 'createdAt', type: "date"},
  {title: "操作", slotName: 'action'},
]

const visible = ref(false)
const fListRef = ref()
function ok() {
  fListRef.value.getList()
}
async function remove(data: number[] | string[]) {
  const idList = data as number[]
  for (const number of idList) {
    const res = await aiRoleRemoveApi(number)
    if (res.code) {
      Message.error(res.msg)
      return
    }
    Message.success(res.msg)
  }
  fListRef.value.getList()
}
const detail = reactive<aiRoleUpdateAdminType>({
  title: "",
  avatar: "",
  category: "",
  abstract: "",
  prompt: "",
  roleID: 0,
})

function edit(record: aiRoleType) {
  detail.roleID = record.id
  detail.title = record.title
  detail.avatar = record.avatar
  detail.category = record.category
  detail.abstract = record.abstract
  detail.prompt = record.prompt
  detail.prompt = record.prompt
  visible.value = true
}
function add() {
  detail.roleID = 0
  detail.title = ""
  detail.avatar = ""
  detail.category = ""
  detail.abstract = ""
  detail.prompt = ""
  visible.value = true
}


</script>

<template>
  <div>
    <f_ai_role_create :detail="detail" type="admin" @ok="ok" v-model:visible="visible"></f_ai_role_create>
    <f_list
        ref="fListRef"
        :url="aiRoleListApi"
        :params="{type: 4}"
        add-form-label="创建角色"
        edit-form-label="更新角色信息"
        edit-label="更新角色信息"
        @delete="remove"
        @edit="edit"
        no-default-delete
        @add="add"
        :columns="columns">
      <template #avatar="{record}:{record: aiRoleType}">
        <f_avatar :image-url="record.avatar" :size="40" :title="record.title"></f_avatar>
      </template>
      <template #prompt="{record}:{record: aiRoleType}">
        <a-typography-text style="width: 200px" :ellipsis="{rows: 2, css: true}">{{ record.prompt }}</a-typography-text>
      </template>
      <template #abstract="{record}:{record: aiRoleType}">
        <a-typography-text style="width: 200px" :ellipsis="{rows: 2, css: true}">{{
            record.abstract
          }}
        </a-typography-text>
      </template>

    </f_list>
  </div>
</template>

<style lang="less">
.ai_role_avatar {
  width: 100%;

  .ai_role_avatar_list {
    border: 1px solid var(--color-neutral-3);
    border-radius: 5px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;

    .arco-radio-group {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-row-gap: 10px;
    }
  }

  .arco-upload {
    width: 100%;
  }

  .upload_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid var(--color-neutral-3);
    margin-right: 10px;

    svg {
      color: var(--color-text-2);
    }
  }
}

</style>